<template>
    <view style="width: 100%;height: 100vh;background-color: #eeeeee;">
		
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="false">
			<block slot="left">
				<text @tap="toPage()" class="cuIcon-back" style="font-size: 40rpx;"></text>
			</block>
			<block slot="content">我的</block>
		</cu-custom>
		
		
		<!-- 未登录、展示登陆按钮 -->
		<view v-if="userInfo == null || userInfo.nickName == undefined">
			<view class="uni-flex uni-column">
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
					<image mode="aspectFit" src="/static/img/qq.png" style="width: 200upx;height: 200upx;"></image>
				</view>
				<view>
					<button style="margin-top: 20upx;background-color: green;width: 90%;" type="primary" class="primary" open-type="getUserInfo" @getuserinfo="onGotUserInfo" >微信授权登陆</button>
					<!-- <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> -->
					<!-- <button style="margin-top: 20upx;width: 90%" type="primary" class="primary" @tap="authByMobile">手机号码登陆</button> -->
				</view>
				<view class="flex-item" style=";font-size: 30upx;text-align: center;">
					登陆即表示同意<text style="color: #0FAEFF;">《卡修用户协议》</text>
				</view>
			</view>
		</view>
		<!-- 已登陆，展示个人中心 -->
		<view  v-if="userInfo && userInfo.nickName">
			<view>
				<view class="uni-flex uni-column" style="background-color: white;justify-content: center;align-items: center">
					<image style="height: 150upx;width: 150upx;border-radius: 50%;margin-top: 20upx;" :src="userInfo.avatar" mode=""></image>
					<view style="margin-top: 10upx;font-weight: bold; font-size: 30upx;color: #929292;">
						{{ userInfo.nickName }}
					</view>
				</view>
			</view>
			
			<view class="cu-list menu card-menu margin-top">
				<view class="cu-item arrow">
					<view class="content" @tap="toOrderList">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">订单中心</text>
					</view>
				</view>
			</view>
		</view>
		
    </view>
</template>

<script>
	
    import {
        mapState,
        mapMutations
    } from 'vuex'
	
    export default {
        components: {
        },
        data() {
            return {
                positionTop: 0,
				userInfo: {}
            }
        },
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
			console.log('xxxx')
		},
        methods: {
			toPage(){
				uni.redirectTo({
					url: '../main/main'
				})
			},
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
			onGotUserInfo(val){
				if(val && val.target && val.target.errMsg && val.target.errMsg.toString().indexOf('ok') == -1){
					// 授权失败
					uni.showModal({
						title: '请授权',
						content: '授权失败可能会无法使用小程序！',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					// 获取用户信息成功，返回给服务器，获取授权
					let sessionKey = uni.getStorageSync("sessionKey");
					// 获取用户信息
					this.$api.getUserInfo({
						signature: val.target.signature,
						rawData: val.target.rawData,
						iv: val.target.iv,
						encryptedData: val.target.encryptedData,
					}).then((res)=>{
						uni.setStorageSync("userInfo", res.data.data);
						uni.reLaunch({
							url: '../main/main'
						})
					}).catch((err)=>{
						console.log('request fail', err);
					})
				}
			},
			toOrderList(){
				uni.navigateTo({
					url: '../orders/orders'
				})
			}
        },
        onReady() {
            this.initPosition();
        }
    }
</script>

<style>
    
</style>
